<template>
	<div class="recruit-container">
		<div class="recruit">
			<div class="recruit-head">
				<div class="name">{{ activityData.title }}</div>
				<div class="time">活动时间：

					<span>{{ activityData.beginTime }}-{{ activityData.endTime }}</span>
				</div>
				<div class="status apply" v-if="activityData.status === 2">已结束</div>
				<div class="status" v-else>招募中</div>
			</div>
			<div class="recruit-con" v-html="activityData.act_rule"></div>
			<div class="recruit-bottom">
				<div class="to-apply" :class="{ done: activityData.status === 2 }" v-if="!btnStatus"
					@click="toApply(activityData.id, activityData.status)">申请活动</div>
				<div class="to-manage" v-else @click="router.push('/activity/my')">管理我的活动</div>
			</div>
			<div class="recruit-success" v-show="recruitSuccess">
				<div class="rs">
					<p>申请成功 <br>请进入我的活动留意活动进程， <br>谢谢！</p>
					<div class="close-rs" @click="recruitSuccess = fasle">确认</div>
				</div>
			</div>
			<div class="my-detail" v-if="showChild">

				<div class="my-detail-con">
					<div class="my-detail-close" @click="showChild = false">
						<ele-Close />
					</div>
					<div class="newsdetail-container">
						<el-form label-width="100px">
							<el-form-item label="活动标题：">
								<span>{{ activityData.title }}</span>
							</el-form-item>
							<el-form-item label="培训材料：">
								<el-button @click="downFile(activityData.train_material, '培训材料')">点击下载</el-button>
							</el-form-item>
							<el-form-item label="反馈材料:">
								<el-button @click="downFile(activityData.feedback_material, '反馈材料')">点击下载</el-button>
							</el-form-item>
							<el-form-item label="实体材料:">
								<div style="display:block;">
									<div v-for="(item) in activityData.real_material" :key="item.id">
										<div>{{ item.title }} * {{ item.num }}</div>
									</div>
								</div>
							</el-form-item>

							<el-form-item label="活动起始时间:">
								<span>{{ activityData.beginTime }}--{{ activityData.endTime }}</span>
							</el-form-item>
							<el-form-item label="活动申报时间:">
								<div v-for="(item, index) in timeValue" :key="item" class="delcon">
									<div class="block">
										<el-button type="success">第{{Number(index+1)}}场</el-button>
									</div>
									<div class="block">
										<el-date-picker @change="dataChange(index)" v-model="item[0]" :clearable="false" type="date" format="YYYY-MM-DD" :disabledDate="disabledDate" placeholder="选择日期"
											:size="size" />
									</div>
									<el-time-picker @change="timeChange(index)" :disabledHours="disabledHours" :disabled="!item[0]" v-model="item[1]"  format="HH:mm" is-range range-separator="到" start-placeholder="开始时间"
										end-placeholder="结束时间" />
									<el-button type="danger" @click="deleteTime(index)" class="delbtn">删除</el-button>
								</div>
							</el-form-item>
							<el-button size="small" @click="addTime()">添加申报时间</el-button>
							<el-row justify="center">
								<el-button @click="confirmApply()">确认申请</el-button>
							</el-row>
						</el-form>
					</div>
				</div>

			</div>
		</div>
	</div>
</template>

<script setup>
import router from '/@/router/index';
import { ref, onMounted } from 'vue'
import { useRoute } from "vue-router";
const route = useRoute();
import { useActivityApi } from '/@/api/activity';
import { ElMessage } from 'element-plus';
import { downFile } from '/@/utils/globalMethods';

const activityData = ref({});
const id = route.query.id
const showChild = ref(false)
async function getActivityDetail() {
	const res = await useActivityApi().actDetail({ id: id });
	if (res) {
		activityData.value = res.data
	}
}
onMounted(() => {
	getActivityDetail();
})

const recruitSuccess = ref(false);
const btnStatus = ref(false);
async function toApply(id, status) {
	if (status === 2) {
		return false;
	}
	showChild.value = true;

}
const timeValue = ref([['', '']])

function disabledDate(time) { // 禁用今天之前的时间
	return !((time.getTime()+24*3600*1000>new Date(activityData.value.beginTime))&&(time.getTime()+24*3600*1000>new Date())&&(time.getTime() < new Date(activityData.value.endTime)))
}
function disabledHours(){
	return [0,1,2,3,4,5,6,7,22,23,23]
}

function dataChange(i){
		timeValue.value[i][1]=[]
}
function timeChange(i,e){
	const v=timeValue.value[i];
	const beginTime=getYMD(v[0]) + getHMS(v[1][0]);
	const endTime=getYMD(v[0]) + getHMS(v[1][1]);
	if(new Date(beginTime)<=new Date()){
		timeValue.value[i][1]=[]
		alert('活动申请时间必须晚于当前时间');
	}else if(new Date(beginTime)<=new Date(activityData.value.beginTime)){
		timeValue.value[i][1]=[]
		alert('活动申请时间必须晚于活动开始时间');
	}else if(new Date(endTime)>=new Date(activityData.value.endTime)){
		timeValue.value[i][1]=[]
		alert('活动申请时间必须早于活动结束时间');
	}
	const rangeArr=[...timeValue.value];
	rangeArr.sort((a,b)=>{
		return a[0]-b[0]
	})
	timeValue.value=rangeArr;
}
function addTime() {
	timeValue.value.push(['', ''])
}
function deleteTime(i) {
	let list = [...timeValue.value];
	list.splice(i, 1)
	timeValue.value = list
}
function getYMD(t) {
	var nowData = new Date(t);
	return nowData.getFullYear() + '-' + (Number(nowData.getMonth()) + 1) + '-' + nowData.getDate() + ' '
}
function getHMS(t) {
	var nowData = new Date(t);
	return nowData.getHours() + ':' + nowData.getMinutes() + ':' + nowData.getSeconds()
}
async function confirmApply() {
	let tmpTime = [];
	let canSubmit=true;
	timeValue.value.map((v,i) => {
		if (v[0] && v[1]) {
			if(!(v[1][0]&&v[1][1])){
			canSubmit=false;
			}
			tmpTime.push({
				beginTime: getYMD(v[0]) + getHMS(v[1][0]),
				endTime: getYMD(v[0]) + getHMS(v[1][1]),
			})
		}

	})
	if (tmpTime.length === 0) {
		ElMessage('请选择申请时间')
	} else {
		if(canSubmit){
			const res = await useActivityApi().applyAct({ actId: id, actTime: tmpTime });
				if (res) {
					showChild.value = false;
					if (res.code === 10014) {
						ElMessage(res.msg)
						btnStatus.value = true;
					} else {
						recruitSuccess.value = true;
					}
				}
		}else{
			ElMessage('请选择申请的具体时间')
		}
	
	}

}
</script>

<style scoped lang="scss">
@media screen and (max-width: 576px) {
	.recruit-head .time span {
		display: block;

	}
}

.newsdetail-container {
	width: 100%;
	overflow: auto;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 5px;
	background: #ffffff;
	box-sizing: border-box;
	padding: 50px 20px 20px;
}

.my-detail {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 10;
	background: rgba(0, 0, 0, 0.6);

	.my-detail-close {
		width: 30px;
		height: 30px;
		position: absolute;
		right: 5px;
		top: 5px;
		cursor: pointer;
		z-index: 2;
	}

	.my-detail-con {
		width: 95%;
		max-width: 800px;
		height: 600px;
		height: 90%;
		max-height: 600px;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		margin: auto;
		z-index: 2;
	}
}

.recruit {
	margin: 10px auto 0;
	padding-bottom: 2px;
	border-radius: 20px 20px 0 0;
	background: rgb(245, 245, 245);
	position: relative;

	&-container {
		width: 100%;
		overflow: auto;
		height: 100vh;
	}

	&-head {
		box-sizing: border-box;
		padding: 25px 18px 10px;
		position: relative;

		.name {
			height: 30px;
			line-height: 30px;
			text-align: left;
			font-size: 16px;
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			color: rgb(62, 66, 73);
			margin-bottom: 15px;
		}

		.time {
			font-size: 12px;
			color: rgb(146, 146, 176);
			line-height: 20px;
			text-align: left;
		}

		.status {
			width: 72px;
			height: 35px;
			font-size: 12px;
			font-weight: 400;
			color: rgb(251, 251, 251);
			text-align: center;
			line-height: 35px;
			cursor: pointer;
			background: rgb(233, 157, 66);
			position: absolute;
			bottom: 0;
			right: 20px;

			&.apply {
				background: rgb(187, 187, 187);
			}
		}
	}

	&-con {
		height: calc(100vh - 102px - 54px - 160px);
		background: #ffffff;
		width: 100%;
		font-size: 14px;
		box-sizing: border-box;
		padding: 20px;
		overflow: auto;
		color: rgb(16, 16, 16);

		p {
			font-size: 14px;
			color: rgb(16, 16, 16);
		}
	}

	&-bottom {
		height: 85px;
		display: flex;
		align-items: center;
		justify-content: center;

		div {
			width: 140px;
			height: 35px;
			text-align: center;
			line-height: 35px;
			text-align: center;
			font-size: 14px;
			color: #ffffff;
			background: rgb(231, 56, 34);
			border-radius: 18px;
			cursor: pointer;

			&.to-manage {
				background: rgb(233, 157, 66);
			}

			&.done {
				background: rgb(187, 187, 187);
			}
		}

	}

	&-success {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		background: rgba(0, 0, 0, 0.6);
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;

		.rs {
			width: 282px;
			height: 229px;
			background: rgb(251, 251, 251);
			text-align: center;
			box-sizing: border-box;
			padding: 28px 0 0;

			p {
				color: rgb(64, 149, 229);
				font-size: 16px;
				font-weight: bold;
				margin-bottom: 42px;
			}

			.close-rs {
				background: rgb(64, 149, 229);
				width: 80px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				margin: 0 auto;
				border-radius: 4px;
				font-size: 14px;
				color: #ffffff;
			}
		}
	}
}

.delcon {
	vertical-align: middle;
	display: flex;
	margin-bottom: 20px;
	max-width: 100%;
		font-size: 0;
}

.delbtn {
	margin-left: 20px;
}

@media screen and (max-width: 576px) {
	.delcon {
		flex-direction: column;
	}

	.delbtn {
		margin-left: 0;
		margin-top: 10px;
		max-width: 70px;
	}
}
</style>